<style>
</style>

<template>
    <div class="table">
        <!-- 头部菜单按钮 -->
        <div class="table-header">
             <Row>
                <Col span="12">
                    <Button type="success" icon="android-add" @click="showAddWindow = true">添加机构</Button>
                </Col>
                <Col span="12">
                    <div style="float:right;"> 
                        <Input v-model="keywords" placeholder="请输入..." style="width: 150px"></Input>
                        <Button type="ghost" icon="ios-search">搜索</Button>
                    </div>
                </Col>
            </Row>
        </div>

        <Table border :columns="columns" :data="list"></Table>
        <Page :current.sync="page" :total="total_count" :page-size="limit" @on-change="getList" show-total show-elevator :style="{'text-align': 'center'}"></Page>

        <Modal v-model="showAddWindow" title="添加机构" width="600px" :mask-closable="false" :styles="{top: '30px'}">
            <add-organ @closeAddWindow="closeAddModal"></add-organ>
            <div slot="footer"></div>  
	    </Modal>
        <Modal v-model="showEditWindow" title="修改机构信息" width="600px" :mask-closable="false" :styles="{top: '30px'}">
            <edit-organ @closeEditWindow="closeEditModal" :editid="editid"></edit-organ>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="showQRCode" title="机构二维码" width="460px" >
            <qr-code :codeUrl="c_url"></qr-code>
            <div slot="footer"></div> 
        </Modal>
    </div>
</template>

<script>
import http from '../../../libs/http';
import addOrgan from './add';
import editOrgan from './edit';
import qrCode from './qrcode';
export default {
    components: {
        addOrgan,
        editOrgan,
        qrCode
    },
    data () {
        return {
            showAddWindow: false,
            showEditWindow: false,
            showQRCode: false,
            editid: '', //编辑对象id
            c_url: '', //生成code的url
            list: [], 
            limit: 20,
            page: 1,
            total_count: 0,
            keywords: '',
            columns: [
                {
                    title: 'ID',
                    key: 'id',
                    align: 'center',
                    width: '80px'
                },
                {
                    title: '机构',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '联系人',
                    key: 'contact',
                    align: 'center'
                },
                {
                    title: '联系方式',
                    key: 'mobile',
                    align: 'center'
                },
                {
                    title: '累计商户数',
                    key: 'account_count',
                    align: 'center'
                },
                {
                    title: '累计收银员数',
                    key: 'cashier_count',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: '260px',
                    render: (h, params) => {
                        return h('div', [
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.generateCode(params.row.id)
                                    }
                                }
                            }, '生成机构二维码'),
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.row.id)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row.id)
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        getList(page) {
            this.page = page;
            var that = this;
            var url = 'admin/organization/index/page/' + page + '/limit/' + that.limit;
            this.apiGet(url).then((res) => {
                if(res.code != 200) {
                    this.handleError(res);
                } else {
                    that.list = res.data.list;
                    that.total_count = res.data.total_count
                }
            })
        },
        generateCode (id) {
            var url = 'admin/organization/generate/code';
            var data = {
                scene: 'organ_id=' + id,
                organ_id: id
            }
            this.apiPost(url, data).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.showQRCode = true;
                    this.c_url = res.data;
                }
            });
        },
        edit (id) {
            this.showEditWindow = true;
            this.editid = id;
        },
        remove(id) {
            this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.delete(id);
                    }
                });
        },
        delete(id) {
            var url = 'admin/organization/delete/';
            this.apiDelete(url,id).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.getList(this.page);
                    this.$Message.success(res.msg);
                }
            });
        },
        closeAddModal () {
            this.showAddWindow = false;
            this.getList(this.page);
        },
        closeEditModal () {
            this.showEditWindow = false;
            this.getList(this.page);
        }
    },
    created () {
        this.getList(this.page);
    },
    watch: {
        showEditWindow: function (status) {
            if (status == false) {
                this.editid = null;
            }
        }
    },
    mixins: [http]
}
</script>
